<template>
	<view class="indexListWp">
		<view class="indexItem" v-for="(item,index) in indexList" :key="index">
			<view class="top" @click="tapIndexList(item,index)">
				<view :class="actionIndexList==index?'indexItemTitle':'indexItemTitleAction'">
					{{item.initial}}
				</view>
			</view>
			<view class="listWp">
				<view class="mainWp">
					<view class="cardWp" v-for="(item2,index2) in item.bcCardBuddyInfoVOList" :key="index2">
						<view class="card">
							<view class="left" @click="goToDetail(item2,index)">
								<view class="imgWp">
									<img :src="item2.head" v-if="item2.head" alt="">
									<u-image v-else
										src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
										width="96rpx" height="96rpx" alt=""></u-image>
								</view>
								<view class="info">
									<view class="nameWp">
										<view class="name">
											{{item2.name?item2.name:''}}
											<text style="margin-left: 20rpx;color: #4E5969;font-size: 28rpx;"></text>
										</view>
										<view class="position">
											{{item2.position?item2.position:''}}
										</view>
									</view>

									<view class="company">
										<text class="u-line-1">{{item2.company?item2.company:''}}</text>
									</view>
								</view>
							</view>
							<view class="right" hover-class="hoverClass1" @click="handleOptionbtn(item2)">
								<view class="more flexCenter">
									<img style="width: 34rpx;height:34rpx;"
										src="https://file.casugn.com/storecompcard/temp/interactive-button／more-vertical@2x_1681364518905.png"
										alt="" srcset="">
								</view>
							</view>



						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actionIndex: 0,
				actionIndexList: 0,
			}
		},
		props: {
			indexList: {
				Type: Array,
				default: () => [],
				required: true
			}
		},
		methods: {
			tapIndexList(item, index) {
				this.actionIndexList = index
				// console.log('tapIndexList', item);
			},
			goToDetail(item, index) {
				console.log('goToDetail', item, index);
				this.$emit('goToDetail', item, index)
			},
			handleOptionbtn(item) {
				this.$emit('handleOptionbtn', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hoverClass1 {
		box-shadow: 0 0 10rpx #eee;
		border-radius: 50%;
	}

	.indexListWp {
		.indexItem {

			.top {
				display: flex;
				align-items: center;

				.round {
					width: 21upx;
					height: 21upx;
					border-radius: 50%;
					border: 1px solid #eee;
				}

				.roundAction {
					width: 21upx;
					height: 21upx;
					border-radius: 50%;
					background-color: #5555ff;
					border: 1px solid #423BFE;
				}

				.indexItemTitle {
					width: 750rpx;
					height: 50rpx;
					padding-left: 50upx;
					font-size: 26upx;
					font-weight: 500;
					color: #86909C;
					line-height: 50rpx;
					background-color: #f7f8fa;
				}

				.indexItemTitleAction {
					width: 750rpx;
					height: 50rpx;
					padding-left: 50upx;
					font-size: 26upx;
					font-weight: 500;
					color: #276aee;
					line-height: 50rpx;
					background-color: #f7f8fa;
				}
			}

			.listWp {
				display: flex;



				.mainWp {


					.line {
						height: 220upx;
						width: 4upx;
						margin-left: 10upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.cardWp {
						margin-top: 12rpx;
						border-radius: 8upx;
						width: 750rpx;
						height: 142rpx;

						.card {
							padding: 24upx 0;
							margin: 0 32rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							background-color: #FFFFFF;
							border-bottom: 1rpx solid #eee;



							.left {
								display: flex;
								align-items: center;

								.imgWp {
									background-color: #c9cdd4;
									width: 96upx;
									height: 96upx;
									margin-right: 24rpx;
									align-self: flex-start;

									img {
										border-radius: 4rpx;
										width: 100%;
										height: 100%;
									}
								}

								.info {
									flex: 1;

									.nameWp {
										max-width: 400rpx;
										display: flex;
										align-items: center;

										.name {
											height: 44rpx;
											font-size: 32rpx;
											font-weight: 600;
											color: #1D2129;
											line-height: 45rpx;
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;

										}

										.position {
											margin-left: 20rpx;
											font-size: 28rpx;
											max-width: 400rpx;
											height: 40rpx;
											font-size: 28rpx;
											color: #86909C;
											line-height: 39rpx;
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;
										}
									}



									.company {
										margin-top: 16rpx;
										height: 40rpx;
										font-size: 28rpx;
										font-weight: 400;
										color: #86909C;
										line-height: 39rpx;

									}
								}

							}

							.right {
								.more {
									width: 100upx;
									height: 100upx;
								}
							}
						}
					}
				}

			}
		}

	}
</style>